<template>
    <el-drawer v-model="show" class="filterlist_dialog" direction="btt" :show-close="false"
        @open="store.openListdrawer">
        <template #header="{ close, titleId, titleClass }">
            <div class="drewer_header" @click="show = false">
                <img src="@/assets/home/shouqi.png" style="width: 24px; height: 24px" alt="" />
                <div>过滤器列表</div>
            </div>
        </template>
        <div class="filter_list">
            <div class="content" v-loading="state.filterlistloading">
                <el-table  class="filter_list_table" :data="state.filterlist" style="width: 100%" height="100%" @row-click="store.clickfilterrow">
                    <el-table-column prop="date" label="过滤器编码">
                        <template #default="scope">
                            <div>{{ scope.row.filter_obj_code }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="过滤器名称">
                        <template #default="scope">
                            <div>{{ scope.row.filter_name }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="保存时间">
                        <template #default="scope">
                            <div>{{ scope.row.update_time }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="100">
                        <template #default="scope">
                            <div style="display: flex;justify-content: flex-end;" >
                                <div v-if="scope.row.filter_type != 'out'" style="color: var(--pcmain-color);cursor: pointer;" @click.stop="store.openeditfilter(scope.row)">编辑</div>
                                <div style="margin-left: 16px;color: #fb445f;cursor: pointer;" @click.stop="store.deletefilter(scope.row)">删除</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="filter_list_footer">
                <el-pagination class="pagination" @current-change="store.filterlistPageChange"
                    v-model:current-page="state.listpage.page" v-model:page-size="state.listpage.page_size" layout=" prev, pager, next, "
                    :total="state.listpage.total" />
            </div>
        </div>
    </el-drawer>
</template>

<script setup>
const show = defineModel({ type: Boolean })

const { store, state } = inject('Filter')

</script>

<style lang="scss" scoped>
.drewer_header {
    width: 100%;
    height: 40px;
    padding: 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    
}

.filter_list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}

.content {
    flex: 1;
}


.filter_list_footer {
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style>
.filterlist_dialog {
    width: 1100px !important;
    height: 640px !important;
    left: 20% !important;
}

.filterlist_dialog .el-drawer__header {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to left, #ffa400, var(--pcmain-color));
    cursor: pointer;
}

.filterlist_dialog .el-drawer__body {
    padding: 12px 12px 0 12px;
}

.filter_list_table th.el-table__cell {
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    color: #8a8a8a;
}

.filter_list_table td.el-table__cell .cell {
    font-size: 14px;
    color: #333;
}

.filter_list_table td.el-table__cell {
    border-bottom: 1px solid #ebebeb;
}
.filter_list_footer .el-pager li{
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

.filter_list_footer .el-pager li.is-active{
  background-color: var(--pcmain-color);
  color: #fff;
}
</style>